<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 400px;
			height: 500px;
		}
		div img{
			width: 100%;
			height: 100%;
			transition: all 1s;

/*			filter: blur(20px);*/
/*			高斯模糊  数值越大越模糊*/

			/*filter: brightness(50%);
			设置明亮程度  数值越小  越暗*/

			/*filter: grayscale(0%);
			灰度  0% 正常   100%  黑白色*/

			filter: invert(60%);

		}
		div img:hover{
/*			filter: blur(0px);*/

/*			filter: brightness(100%);*/

/*			filter: grayscale(100%);*/

			filter: invert(0%);
/*			底片   反转输入头像  相机底片效果*/

		}
	</style>
</head>
<body>

	<div>
		<img src="../01.jpg">
	</div>




</body>
</html>